@import "partials/mixins";
@mixin home-flex() {
	.home-flex:first-child .home-head {
		background: $bg_blur1;
	}
	.home-flex:nth-child(2) .home-head {
		background: $bg_yellow1;
	}
	.home-flex:nth-child(3) .home-head {
		background: $bg_green1;
	} 
	.home-flex:first-child .point {
		background-color: $bg_green2;
	}
	.home-flex:nth-child(2) .point {
		background-color: $bg_yellow2;
	}
	.home-flex:nth-child(3) .point {
		background-color: $bg_red1;
	}
}

#home {
	font-size: ptr(24px);
	background-color: #f8f8f8;
	overflow: hidden;
	color: inherit;
	.home-container {
		padding: ptr(20px);
		.home-flex {
			width: ptr(225px);
			height: ptr(250px);
			border-radius: ptr(10px);
			background: $defult;
			overflow: hidden;
			@include borderBox(#ececec);
			&>.home-head {
				font-size: ptr(32px);
				text-align: center;
				color: $defult;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: ptr(76px);
				line-height: ptr(76px);
			}
			&>.home-num {
				height: ptr(100px);
				font-size: ptr(66px);
				color: $bg_green1;
			}
			.point {
				width: ptr(10px);
				height: ptr(10px);
				border-radius: 100%;
				
				margin: 0 ptr(5px);
			} // &>.home-dec {
			// 	position: relative;
			// 	padding-left: ptr(20px);
			// 	text-align: center;
			// }
		}
		@include home-flex();
		.home-breif {
			border-radius: ptr(10px);
			padding: ptr(15px);
			padding-bottom: 0 !important;
			background: #fff;
			@include borderBox(#ececec);
			.breif-show {
				border-bottom: 1px solid #ddd;
				padding-bottom: ptr(25px);
				padding-top: ptr(30px);
				.breif-flex {
					text-align: center;
					&>span {
						display: block;
						color: $bg_green3;
						font-size: ptr(40px);
						padding-bottom: ptr(10px);
					}
					&>p {
						margin: 0;
						position: relative;
						padding-left: ptr(32px);
						font-size: ptr(26px);
					}
					&:first-child>p {
						background: url("~img/icon-success.png") no-repeat left center;
						background-size: ptr(22px) ptr(22px);
					}
					&:last-child>p {
						background: url("~img/icon-fail.png") no-repeat left center;
						background-size: ptr(22px) ptr(22px);
					}
				}
			}
			.breif-footer {
				height: ptr(84px);
				.breif-result {
					position: relative;
					padding-left: ptr(45px);
					font-size: ptr(26px);
					color: #666;
					&:before {
						@include point(10px,
						10px,
						100%,
						$bg_green3);
					}
				}
			}
			.breif-href {
				position: relative;
				height: ptr(50px);
				&:before,
				&:after {
					position: absolute;
					top: 50%;
					width: 0;
					height: 0;
					content: "";
					right: ptr(20px);
					border: ptr(20px) solid transparent;
					border-left: ptr(20px) solid $defult;
					margin-top: ptr(-20px);
				}
				&:before {
					border-left-color: $font-color1;
					right: ptr(19px);
				}
			}
			.open {
				height: ptr(50px);
				&.open_icon {
					background: url("~img/open_icon.png") no-repeat center center;
					background-size: ptr(98px) ptr(77px);
				}
				&.close_icon {
					background: url("~img/close_icon.png") no-repeat center center;
					background-size: ptr(98px) ptr(77px);
				}
			}
			.news-content {
				padding: ptr(20px);
				border-bottom: 1px solid #ECECEC;
				.new-nums {
					font-size: ptr(30px);
					color: $font-color;
					strong {
						color: $bg_green3;
						font-weight: normal;
						font-size: ptr(40px);
					}
					&>div:last-child {
						text-align: center;
					}
				}
				&>p {
					margin: 0;
					margin-top: ptr(10px);
					color: $font-color1;
					font-size: ptr(26px);
				}
				.news-footer {
					margin-top: ptr(10px);
					color: $font-color1;
					font-size: ptr(26px);
				}
			}
		}
	}
	.rankItem {
		line-height: ptr(70px);
		.icon_rank1 {
			margin-right: ptr(5px);
			width: ptr(40px);
			height: ptr(46px);
			background: url("~img/rank1.png") no-repeat center center;
			background-size: 100% 100%;
		}
		.icon_rank2 {
			margin-right: ptr(5px);
			width: ptr(40px);
			height: ptr(46px);
			background: url("~img/rank2.png") no-repeat center center;
			background-size: 100% 100%;
		}
		.icon_rank3 {
			margin-right: ptr(5px);
			width: ptr(40px);
			height: ptr(46px);
			background: url("~img/rank3.png") no-repeat center center;
			background-size: 100% 100%;
		}
		.name {
			font-size: ptr(28px);
		}
		.data {
			color: #23C3C5;
			margin-left: ptr(3px);
		}
	}
}
